<template>
	<view style="display: flex; flex-direction: column; height: 100%;">
		<!-- 上屏部分 -->
		<view class="" style="flex: 1; display: flex;">
			<!-- 左侧卡片 -->
			<view class="" style="flex: 1; height: 100%; display: flex; flex-direction: column; 
			gap: 28rpx; padding: 28rpx;">
				<!-- 音乐卡片 row -->
				<view class="" style="display: flex;">
					<!-- 专辑封面 -->
					<image src="../../static/logo.png" mode="aspectFit" 
					style="height: 100%; width: 200rpx;"></image>
					<!-- 控制与信息区  col-->
					<view class="" style="flex: 1;">
						<!-- 标题 -->
						<view class="">
							标题标题标题标题标题
						</view>
						<!-- 控制按钮 -->
						<view class="" style="display: flex; justify-content: space-around;">
							<!-- 上一首 -->
							<image src="../../static/logo.png" mode="" class="btn-icon"></image>
							<!-- 暂停-->
							<image src="../../static/logo.png" mode="" class="btn-icon"></image>
							<!-- 下一首 -->
							<image src="../../static/logo.png" mode="" class="btn-icon"></image>
						</view>
					</view>
				</view>
				<!-- 天气和时间 row -->
				<view class="" style="flex: 1; display: flex; gap: 24rpx;">
					<!-- 天气 -->
					<view class="" style="flex: 1;">
						<view>广州</view>
						<view>38℃</view>
						<view>晴天</view>
					</view>
					<!-- 时间 -->
					<view class="" style="flex: 1;">
						<view>12:30</view>
						<view>2020-01-02</view>
						<view>农历 二月初一</view>
					</view>
				</view>
				<!-- 车辆信息 -->
				<!-- 汽车信息卡片， 展示行驶距离、出行次数、车内外温度等
				信息，点击卡片唤起车辆信息 App -->
				<view class="" style="flex: 1;">
					<view>行驶距离: 1002 KM</view>
					<view>出行次数: 102</view>
					<view>车内/外温度: 27℃/30℃</view>
				</view>
			</view>
			<!-- 右侧信息 -->
			<view class="" style="flex: 2;">

			</view>
		</view>
		<!-- 底部菜单部分 -->
		<view class="" style="height: 10vh; display: flex; justify-content: center; padding: 8rpx 24rpx;">
			<!-- 图标组 -->
			<view class="" style="height: 100%; display: flex; justify-content: center; gap: 32rpx;">
				<view class=""
					style="height: 100%; width: 10vh; display: flex; flex-direction: column; justify-content: center; align-items: center;"
					v-for="i in 5" :key="i">
					<template v-if="menuApps[i-1]">
						<image :src="menuApps[i-1].icon" mode="aspectFit" style="flex:1; width: 10vh;"></image>
						<text>{{menuApps[i-1].title}}</text>
					</template>
					<template v-else>
						<view style="font-size: 64rpx;">+</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function NullFunc() {}

	export default {
		data() {
			return {
				allApps: {
					"appid": {
						icon: "../../static/logo.png",
						title: "标题",
						onClick: NullFunc,
						onLongClick: NullFunc,
					}
				},
				menuAppIds: [
					"appid"
				]
			}
		},
		computed: {
			menuApps: function() {
				return this.menuAppIds.map((id) => {
					return this.allApps[id]
				})
			}
		},
		methods: {
			addAppInIndex(index) {}
		}
	}
</script>

<style scoped>
	view {
		border: 1px solid #007AFF;
	}

	.btn-icon {
		height: 64rpx;
		width: 64rpx;
	}
</style>
